<template>
	<SlotModal ref='slotModalRef' v-bind='slotModalConfig'>
		<n-form ref='formRef' v-bind='formConfig'
				:model='formData' :rules='formRules'>
			<n-grid :x-gap='24' :cols='6'>
				<n-form-item-grid-item span='3' label='序号' path='sort'>
					<n-input-number v-model:value='formData.sort as number'
									style='width:100%;' min='0' clearable/>
				</n-form-item-grid-item>
				<n-form-item-grid-item span='3' label='字典类型编码' path='dictTypeCode'>
					<n-input v-model:value='formData.dictTypeCode' style='width:100%'
							 disabled readonly clearable/>
				</n-form-item-grid-item>
				<template v-if='"child" === mode'>
					<n-form-item-grid-item span='3' label='上级字典值编码' path='parentDictDataCode'>
						<n-input v-model:value='formData.parentDictDataCode' style='width:100%'
								 disabled readonly clearable/>
					</n-form-item-grid-item>
					<n-form-item-grid-item span='3' label='' path=''/>
				</template>
				<n-form-item-grid-item span='3' label='字典值编码' path='dictDataCode'>
					<n-tooltip trigger='click'>
						<template v-slot:trigger>
							<n-input v-model:value='formData.dictDataCode' style='width:100%'
									 clearable/>
						</template>
						格式:A001 B001 C001,以顺序字母为开头,以顺序数字为结尾
						<br/>
						栗子:A001B002C001
					</n-tooltip>
				</n-form-item-grid-item>
				<n-form-item-grid-item span='3' label='字典值名称' path='label'>
					<n-tooltip trigger='click'>
						<template v-slot:trigger>
							<n-input v-model:value='formData.label' style='width:100%' clearable/>
						</template>
						通常为中文字符,数字,大小写字母,下划线
					</n-tooltip>
				</n-form-item-grid-item>
				<n-form-item-grid-item span='3' label='字典值' path='value'>
					<n-tooltip trigger='click'>
						<template v-slot:trigger>
							<n-input v-model:value='formData.value' style='width:100%' clearable/>
						</template>
						通常为字母数字下划线的组合
					</n-tooltip>
				</n-form-item-grid-item>
				<n-form-item-grid-item span='3' label='是否不可选' path='disabled'>
					<n-tooltip trigger='click'>
						<template v-slot:trigger>
							<n-switch v-model:value='formData.disabled'
									  size='large' :checked-value='true' :unchecked-value='false'>
								<template v-slot:checked>不可选</template>
								<template v-slot:unchecked>可选</template>
							</n-switch>
						</template>
						如果你想要选项展示为灰色且不可选择,那么启用该项
					</n-tooltip>
				</n-form-item-grid-item>
				<n-form-item-grid-item span='3' label='字典值类型' path='dictType'>
					<n-tooltip trigger='click'>
						<template v-slot:trigger>
							<n-switch v-model:value='formData.dictType' :disabled='"child" === mode'
									  size='large' :checked-value='"group"' :unchecked-value='null'>
								<template v-slot:checked>组字典</template>
								<template v-slot:unchecked>正常字典</template>
							</n-switch>
						</template>
						字典如果有下级,那么启用该选项,可以为他添加下级字典
						<br/>
						注意:最多只有2级字典,它不能是无限嵌套的
					</n-tooltip>
				</n-form-item-grid-item>
				<n-form-item-grid-item span='3' label='是否启用' path='status'>
					<n-switch v-model:value='formData.status'
							  size='large' :checked-value='true' :unchecked-value='false'>
						<template v-slot:checked>启用</template>
						<template v-slot:unchecked>禁用</template>
					</n-switch>
				</n-form-item-grid-item>
				<n-grid-item span='6' :show-feedback='false'>
					<n-flex justify='center' align='center'
							:wrap='false' inline style='width:100%;'>
						<n-button round secondary type='info'
								  @click='submitEvent'>
							提交
						</n-button>
						<n-button round secondary type='default'
								  @click='clearFormData'>
							重置
						</n-button>
					</n-flex>
				</n-grid-item>
			</n-grid>
		</n-form>
	</SlotModal>
</template>
<script lang='ts' setup>
import { defineAsyncComponent, onBeforeMount, onMounted } from 'vue';
import useLeftAddModalHooks from './hooks/right/addModal.ts';
// ----------------------------------------------------------------------
const SlotModal = defineAsyncComponent(() => import('@/components/customComponents/modal/SlotModal.vue'));
// ----------------------------------------------------------------------
const props = defineProps({
	reLoad : {
		type    : Function,
		require : true,
		default : null
	}
});
const {
		  mode,
		  slotModalConfig, formConfig,
		  slotModalRef, formRef,
		  formData, formRules,
		  showModal,
		  clearFormData, submitEvent
	  } = useLeftAddModalHooks(props, SlotModal);
onBeforeMount(() => {
});
onMounted(async () => {
});
// 导出方法
defineExpose({ showModal });
</script>